<template>
  <div class="xz-test">123</div>
</template>

<script setup lang="ts" name="生命周期">
import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  onRenderTracked,
  onRenderTriggered,
} from "vue";
/**
 * setup语法糖模式是没有 beforeCreate created 这两个生命周期的   因为setup本身会代替这两个，优先去执行
 */

console.log("setup");
onBeforeMount(() => {
  console.log("onBeforeMount");
});
onMounted(() => {
  console.log("onMounted");
});
onBeforeUpdate(() => {
  console.log("onBeforeUpdate");
});
onUpdated(() => {
  console.log("onUpdated");
});
onBeforeUnmount(() => {
  console.log("onBeforeUnmount");
});
onUnmounted(() => {
  console.log("onUnmounted");
});

onRenderTracked((e) => {
  console.log(e);
});
onRenderTriggered((e) => {
  console.log(e);
});
</script>

<style lang="scss" scoped>
@include b(test) {
  color: red;
}
</style>
